<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>张伟峰-爆破</title>
    <link rel="stylesheet" type="text/css" href="../css/base.css" >
    <style>
    	html,body{  height:100%;  overflow: hidden;  }
     	body{ background: -webkit-linear-gradient(#339999,#9c9c9c); }
        .box{ width:700px; height:400px; background: url("img/01.jpg") no-repeat; margin: 50px auto;  position: relative; }
        .box span{  position: absolute; background: url(img/00.jpg) no-repeat; }
    </style>
<script>
    function rnd(n,m){
        return parseInt(Math.random()*(m-n)+n);
    }
    window.onload=function(){
        var oBox=document.querySelector('.box');

        var divC=oBox.offsetWidth/2;

        var R=4;
        var C=7;

        for(var r=0; r<R; r++){
            for(var c=0; c<C; c++){
                var oSpan=document.createElement('span');
                oSpan.style.width=oBox.offsetWidth/C+'px';
                oSpan.style.height=oBox.offsetHeight/R+'px';
                oBox.appendChild(oSpan);

                oSpan.style.left=c*oSpan.offsetWidth+'px';
                oSpan.style.top=r*oSpan.offsetHeight+'px';
                oSpan.style.backgroundPosition='-'+c*oSpan.offsetWidth+'px -'+r*oSpan.offsetHeight+'px';
            }
        }

        //点击
        var iNow=0;
        var bReady=true;
        oBox.onclick=function(){

            if(bReady==false){
                return;
            }
            bReady=false;
            var aSpan=oBox.children;

            iNow++;

            for(var i=0; i<aSpan.length; i++){
                aSpan[i].style.transition='1s all ease';

                var x=aSpan[i].offsetWidth/2+aSpan[i].offsetLeft-divC;
                var y=aSpan[i].offsetHeight/2+aSpan[i].offsetTop-oBox.offsetHeight/2;


                aSpan[i].style.transform='perspective(800px) translate3d('+x+'px,'+y+'px,0) scale(1.2) rotateX('+rnd(-180,180)+'deg) rotateY('+rnd(-180,180)+'deg)';
                aSpan[i].style.opacity=0;
            }

            aSpan[0].addEventListener('transitionend',function(ev){
                if(ev.propertyName=='opacity'){
                   //统一回来
                    for(var i=0; i<aSpan.length; i++){
                        aSpan[i].style.transition='none';
                        aSpan[i].style.transform='perspective(800px) translate3d(0,0,0) scale(1) rotateX(0deg) rotateY(0deg)';
                        aSpan[i].style.opacity=1;

                        //换图
                        aSpan[i].style.backgroundImage='url(img/0'+iNow%3+'.jpg)';
                        oBox.style.backgroundImage='url(img/0'+(iNow+1)%3+'.jpg)';
                    }
                }
                bReady=true;
            },false);
        };
    };
</script>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>